<template>
  <div>
    <Header/>

    <div id="main">
      <article>
        <div class="lbox">
          <div class="banbox" style="width: 100%;">
            <el-carousel height="260px">
              <el-carousel-item v-for="item in bannerList" :key="item.id">
                <img :src="item.img" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="clearblank"></div>
          <div class="tab_box whitebg">
            <h2 class="htitle">
              <span class="hnav"><router-link to="/notice-list">浏览更多</router-link></span>通知公告
            </h2>
            <div class="newstab">
              <div class="newsitem">
                <div class="newspic" v-if="noticeList.length > 2">
                  <ul>
                    <li>
                      <router-link :to="{ name: 'notice-details', params: { id: noticeList[0].id} }">
                        <img :src="noticeList[0].img" style="height: 100px;"><span>{{noticeList[0].title}}</span>
                      </router-link>
                    </li>
                    <li>
                      <router-link :to="{ name: 'notice-details', params: { id: noticeList[0].id} }">
                        <img :src="noticeList[1].img" style="height: 100px;"><span>{{noticeList[1].title}}</span>
                      </router-link>
                    </li>
                  </ul>
                </div>
                <ul class="newslist">
                  <li v-for="(item, index) in noticeList" :key="item.id" v-if="index > 1">
                    <i></i>
                    <router-link :to="{ name: 'notice-details', params: { id: item.id} }">
                      {{item.title}}
                    </router-link>
                    <p>{{item.summary}}</p>
                    <p>{{item.creatTime}}</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="zhuanti whitebg">
            <h2 class="htitle">
              <span class="hnav"><router-link to="/services-list">浏览更多</router-link></span>服务推荐
            </h2>
            <ul>
              <li v-for="item in recommendList" :key="item.id" style="width: 25%!important;">
                <i class="ztpic">
                  <router-link :to="{ name: 'services-details', params: { id: item.id} }">
                    <img :src="item.img" style="width: 100%; height: 100px;">
                  </router-link>
                </i>
                <b>{{item.name}}</b>
                <span style="height: 30px;">{{item.servicesType.name}}</span>
                <span style="height: 30px;">￥{{item.price}}</span>
                <router-link :to="{ name: 'services-details', params: { id: item.id} }" class="readmore">
                  查看详情
                </router-link>
              </li>
            </ul>
          </div>
          <div class="whitebg bloglist">
            <h2 class="htitle">
              <span class="hnav"><router-link to="/information-list">浏览更多</router-link></span>新闻资讯
            </h2>
            <ul>
              <li v-for="item in informationList" :key="item.id">
                <h3 class="blogtitle">
                  <router-link :to="{ name: 'information-details', params: { id: item.id} }">
                    {{item.title}}
                  </router-link>
                </h3>
                <span class="blogpic imgscale">
                  <router-link :to="{ name: 'information-details', params: { id: item.id} }">
                    <img :src="item.img" style="width: 100%; height: 140px;" alt="">
                  </router-link>
                </span>
                <p class="blogtext">{{item.summary}}</p>
                <p class="bloginfo">
                  <i class="avatar"><img :src="item.user.avatar" style="width: 100%; height: 100%;"></i>
                  <span>{{item.user.name}}</span><span>{{item.creatTime}}</span><span></span>
                </p>
                <router-link :to="{ name: 'information-details', params: { id: item.id} }" class="viewmore">
                  查看详情
                </router-link>
              </li>
            </ul>
          </div>
        </div>

        <Right/>
      </article>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { dynamicGetAbout } from '@/api/about'
  import { listBanner } from '@/api/banner'
  import { listLimitNotice } from '@/api/notice'
  import { listLimitInformation } from '@/api/information'
  import { listLimitServices } from '@/api/services'
  import { recommend } from '@/api/recommend'
  import Header from './common/Header.vue'
  import Footer from './common/Footer.vue'
  import Right from './common/Right.vue'

  export default {
    name: 'index',
    components: {
      Header,
      Footer,
      Right,
    },
    computed: {
      ...mapGetters([
        'userId',
      ])
    },
    data() {
      return {
        recommendList: [],
        about: {},
        bannerList: [],
        noticeList: [],
        informationList: [],
        servicesList: [],
      }
    },
    created() {
      this.recommend()
      this.listBanner()
      this.listLimitNotice()
      this.listLimitInformation()
      this.dynamicGetAbout()
      this.listLimitServices()
    },
    methods: {
      recommend() {
        recommend(this.userId, 8).then(response => {
          this.recommendList = response.data
        })
      },
      dynamicGetAbout() {
        const data = {}
        data.status = 1
        dynamicGetAbout(data).then(response => {
          this.about = response.data
        })
      },
      listBanner() {
        const data = {}
        data.status = 1
        listBanner(data).then(response => {
          this.bannerList = response.data
        })
      },
      listLimitNotice() {
        listLimitNotice("id", "desc", 7).then(response => {
          this.noticeList = response.data
        })
      },
      listLimitInformation() {
        listLimitInformation("id", "desc", 5).then(response => {
          this.informationList = response.data
        })
      },
      listLimitServices() {
        listLimitServices("id", "desc", 8).then(response => {
          this.servicesList = response.data
        })
      },
    }
  }
</script>
